<script setup lang='ts'>
import {ref} from 'vue'

let admin=ref("");
let password=ref("");


const str=`""`
const submit=()=>{
    console.log(admin.value,password.value);
    if(admin.value=="1362941253" && password.value=="123456789"){
         location.href="https://gitee.com/hong-caixia/resume/blob/master/resume1.md"
    }
}

</script>
<template>


        <div  class="form">
            <div class="left">
                <!-- muted loop autoplay -->
                <video src="/video/video.mp4" muted loop autoplay ></video>
            </div>
            <div class="right">
                <div class="right-con">
                    <h1>账号登陆</h1>
                    <h3>账号</h3>
                    <input v-model="admin" class="text" type="text">
                   
                    <h3>密码</h3>
                    <input v-model="password" class="text" type="password">
                    <input @click="submit" class="btn" type="submit" value="登陆">
                </div>
            </div>
        </div>
   


  </template>
<style scoped >
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
}


.form {
    width: 900px;
    height: 560px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

.left {
    width: 500px;
    height: 560px;
}

.left video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right {
    width: 400px;
    height: 560px;
    background: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

.right-con {
    width: 70%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

h1 {
    font-size: 26px;
    color: #70b4e3;
    font-weight: 400;
    padding-bottom: 10px;
}

h3 {
    font-size: 12px;
    font-weight: 400;
    color: #70b4e3;
    padding: 20px 0;
}

.text {
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 1px solid #70b4e3;
    color: #366ae6;
    background-color: rgba(0, 0, 0, 0);
}

.btn {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-top: 50px;
    background-image: linear-gradient(120deg, #76daec 0%, #c5a8de 100%);
  
}
.btn:hover{

    background-image: linear-gradient(120deg, #3f7d88 0%, #7e27c9 100%);
}

.btn:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}



</style>